<template>
	<view class="switch_bar">
		<view class="bar" v-for="(item, index) in options" :key="item.id" @click="changeBar(item)">
			<view class="name" :class="{ active: item.index === currentBar }">{{ item.name }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// bar列表
		options: {
			type: Array,
			default: function() {
				return [
					{
						name: '选项一',
						id: '1',
						index: 0
					},
					{
						name: '选项二',
						id: '2',
						index: 1
					}
				];
			}
		},
		// 选中
		currentBar: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	watch: {},
	methods: {
		changeBar(item) {
			this.$emit('change', item);
		}
	},
	mounted() {}
};
</script>

<style lang="scss" scoped>
.switch_bar {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
	overflow-x: scroll;
	background-color: #fff;
	.bar {
		flex: 1;
		min-width: 180rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 700;
		color: rgba(51, 51, 51, 1);
	}
	.name {
		margin: 0 auto;
		width: 100rpx;
		overflow: hidden;
		text-align: center;
	}
	.active {
		color: rgba(25, 102, 255, 1);
		position: relative;
	}
	.active::after {
		position: absolute;
		bottom: 0;
		left: 28rpx;
		content: '';
		width: 44rpx;
		height: 6rpx;
		background: rgba(25, 102, 255, 1);
		box-shadow: 0px 6rpx 16rpx 0rpx rgba(230, 235, 244, 0.8);
		border-radius: 6rpx;
	}
}
</style>
